import React, { FC } from 'react'
import { useNavigate } from 'react-router-dom'
import { SideBar, Tag, ErrorBlock } from 'antd-mobile'
import { LikeOutline, EditSOutline, HeartOutline, UserOutline, EnvironmentOutline, ClockCircleOutline, FireFill } from 'antd-mobile-icons'
import dayjs from 'dayjs'


import { baseURL } from '../api/request'





const ItemOne: FC<any> = ({
  list,
  type,
  flag,
  active
}) => {
  const router = useNavigate()


  return (
    <div>
      {
        list.length > 0 ?
          <div className='class-content'>
            {
              list.map((item: any) => {
                return (
                  <div key={item._id} className='class-content-box' onClick={() => router('/detail/' + item._id + '?title=' + item.title)}>
                    <p className='content-title'>{item.title}</p>
                    <p className='content-username'>
                      <UserOutline />：
                      {item.author?.username}
                    </p>
                    <p className='content-address'>
                      <EnvironmentOutline />：
                      {item.address}
                    </p>
                    <p className='content-date' style={{ color: active == 2 ? '#f50' : '' }}>
                      <ClockCircleOutline />：
                      {flag ? '发表' : ''}日期：{flag ? dayjs(item.time).format("YYYY-MM-DD") : dayjs(item.date).format("YYYY-MM-DD")}
                    </p>
                    <p className='content-hot' style={{ color: active == 1 ? '#f50' : '' }}>
                      <FireFill />：
                      热度：{item.hot}
                    </p>
                    {
                      item.tags.map((v: any, n: any) => {
                        return (
                          <Tag color={type == item.label ? '#ff6430' : item.color} key={n} className="content-tag">{v.label}</Tag>
                        )
                      })
                    }
                    <div className='content-imgbox'>
                      {
                        item.imgs.map((e: any, i: any) => {
                          return (
                            <img src={e.url?.replace(/public/, baseURL)} alt='' key={i} />
                          )
                        })
                      }
                    </div>
                    <p className='content-content'>{item.content}</p>
                    <div className='content-footer'>
                      <span>
                        <LikeOutline />
                        {item.likes ? '：' + item.likes : '：' + 0}
                      </span>
                      <span>
                        <EditSOutline />
                        {item.pings ? '：' + item.pings : '：' + 0}
                      </span>
                      <span>
                        <HeartOutline />
                        {item.collects ? '：' + item.collects : '：' + 0}
                      </span>
                    </div>
                  </div>
                )
              })
            }
          </div>
          :
          <div className='empty' style={{ marginTop: '100px' }}>
            <ErrorBlock status='empty' />
          </div>
      }
    </div>
  )
}

export default ItemOne
